<template>
    <div class="header">
        <div class="logo">
            <nuxt-link to="/">
                <img src="" alt="">
                <span>DPP的个人站点</span>
            </nuxt-link>
        </div>

        <div class="header_right islogin" v-if="isLogin">
            <span @click="goCms"><el-icon>
                    <OfficeBuilding />
                </el-icon> 进入后台</span>
            <span><el-avatar :src="avatar" fit="fill" /></span>
            <el-dropdown @command="clickAbout">
                <span class="el-dropdown-link">
                    {{ 'dpp ' }}

                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item icon="Close" command="exit">退出登录</el-dropdown-item>
                        <el-dropdown-item icon="InfoFilled" divided command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item icon="Unlock" command="psw">修改密码</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="header_right" v-else>
            <span @click="login">登录</span>
            <span @click="regist">注册</span>
        </div>
    </div>
    <Login :drawer="drawer" @close="drawer = false" />
    <Regist :drawer="drawerRegist" @close="drawerRegist = false" />
</template>


<script setup lang='ts'>
import { base } from '~/service/config';


const avatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png');

const drawer = ref(false);
const drawerRegist = ref(false);
const isLogin = ref(false);
const user = ref()

const goCms = () => {
    if (import.meta.env) {
        window.open('http://127.0.0.1:5173/')
    } else {
        window.open('http://106.14.121.85:3002/')
    }
}


const clickAbout = (command: string) => {
    switch (command) {
        case 'exit': loginout()
            break;

        case 'info':
            break;

        case 'psw':
            break;

        default:
            break;
    }
};

const loginout = () => {
    localStorage.removeItem('web-user')
    location.reload()
}


const login = () => {
    drawer.value = true;
};
const regist = () => {
    drawerRegist.value = true;
};

onMounted(() => {
    isLogin.value = Boolean(localStorage.getItem('web-user'))
    user.value = JSON.parse(localStorage.getItem('web-user') as string) || {}
    avatar.value = base + user.value.iamge || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})

</script>


<style scoped lang='scss'>
.header {
    height: 60px;
    /* line-height: 60px; */
    background-color: rgb(84, 92, 100);
    color: white;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: calc(100% - 60px);

    .logo {}

    .header_right {
        span {
            cursor: pointer;
            margin-right: 15px;

            &:hover {
                color: gold;
            }
        }
    }

    .islogin {
        display: flex;
        align-items: center;

        span:first-child {
            display: flex;
            align-items: flex-end;
        }

        .el-dropdown {
            color: white;
        }
    }
}
</style>